<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算属性与侦听器</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		姓: <input v-model="firstName"/>
		名: <input v-model="lastName"/>
		<div>{{firstName}} {{lastName}}</div>
		<div>{{fullName}}</div>
		<div>{{count1}}</div>
		<div>{{count2}}</div>
	</div>
	<script>
		new Vue({
			el:"#root",
			data:{
				firstName: '',
				lastName: '',
				count1:0,
				count2:0
			},
			computed: {
				fullName: function(){
					return this.firstName + ' ' + this.lastName
				}
			},
			watch:{
				firstName: function(){
					this.count1++
				},
				lastName: function(){
					this.count1++
				},
				fullName: function(){
					this.count2++
				}
			}
		})
	</script>
</body>
</html>